<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <a @click="fn.goHome()" href="javascript:void(0)"
        ><img class="back-btn" src="../../../../static/images/back.png"
      /></a>
      <div class="header-search flex-center">组织生活</div>
      <div class="header-right flex-between-center" @click="go()">
        <img src="../../../../static/images/shenqingjilu.png" />申请记录
      </div>
    </header>
    <div class="flex-between-center record-header">
      <h3 class="flex-center">
        <img src="../../../../static/images/zzsh_title.png" />组织生活日程安排
      </h3>
      <a
        v-if="canEdit()"
        @click="add()"
        href="javascript:void(0)"
        class="red-btn flex-center"
        >+添加组织生活</a
      >
    </div>
    <div class="mui-page-content record-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll mui-scroll-wrapper">
          <div class="work-message-lists mui-scroll-wrapper">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="mui-table-view-cell work-message-item"
                    v-for="(data, index) in swipeData"
                    :key="data.id"
                  >
                    <cube-swipe-item
                      ref="swipeItem"
                      :btns="data.btns"
                      :index="index"
                      :class="{ 'swiper-no-swiping': !canEditOrDelete(data) }"
                      @btn-click="edit(data)"
                    >
                      <div @click="detail(data)">
                        <div class="mui-slider-handle">
                          <div class="schedule-item-title flex-space-between">
                            <h4>{{ data.typeLabel }}</h4>
                            <p>{{ formateTimeStr(data.createTime) }}</p>
                          </div>
                          <div class="schedule-item-world flex-justify-start">
                            日期：
                            <h4 class="mine-lists-title">
                              {{ formateTime(data.meetTime) }}
                            </h4>
                          </div>
                          <p class="schedule-item-world">
                            主题：{{ data.subject }}
                          </p>
                          <div class="flex-between-center">
                            <p class="schedule-item-world">
                              地点：{{ data.address }}
                            </p>
                            <span class="work-blue">{{
                              fn.getMeetStatus(data.status, data)
                            }}</span>
                          </div>
                        </div>
                      </div>
                    </cube-swipe-item>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="swipeData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar    start -->
    <footerbar></footerbar>
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    // 是否可以添加修改会议
    canEdit() {
      let roleType = this.$localStorage.get("roleType") || "";
      return tools.hasRoleType(roleType);
    },
    formateTimeStr(str) {
      moment.lang("zh-cn");
      return moment(str).format("MM-DD  HH:mm");
    },
    formateTime(str) {
      moment.lang("zh-cn");
      return moment(str).format("MM月DD日, HH:mm");
    },
    edit(data) {
      if (!this.canEdit()) {
        return tools.tip("没有权限");
      }
      this.$store.state.scheduleEditData = data;
      this.$router.push({ path: `/scheduleEdit/${data.id}` });
    },
    detail(data) {
      this.$store.state.scheduleData = data;
      this.$router.push({ path: `/scheduleDetail/${data.id}` });
    },
    // 添加会议
    add() {
      this.clearStore();
      this.$router.push({ name: "scheduleAdd" });
    },
    clearStore() {
      delete this.$store.state.scheduleAddData;
      delete this.$store.state.scheduleTypeSelected;
      delete this.$store.state.schedulePeopleListSelectedattendUserName;
      delete this.$store.state.schedulePeopleListSelectedcompereUserName;
      delete this.$store.state.schedulePeopleListSelectedrecordEUserName;
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    //      loadData () {
    //        let data = {pageIndex: this.pageIndex}
    //        loginService.getAllCurrUserCreatePartyMeetingPage(data).then((res) => {
    //          if (res.code !== 200) {
    //            this.$refs.scroll.forceUpdate()
    //            return tools.tip(res.describe === '未查询到资源' ? '已无更多数据' : res.describe)
    //          }
    //          this.pageIndex ++
    //          res.data.forEach((v, i) => {
    //            v.btns = [
    //              {
    //                action: 'delete',
    //                text: '修改',
    //                color: '#f0ad4e'
    //              }
    //            ]
    //          })
    //          this.swipeData = this.swipeData.concat(res.data)
    //          setTimeout(() => {
    //            this.$refs.scroll.forceUpdate(true, false)
    //            this.options.isPullUpLoad = !true
    //          }, 100)
    //        })
    //      },
    loadData() {
      let data = {
        pageIndex: this.pageIndex,
        sortField: "ipm.CREATE_TIME_",
        sortOrder: "desc",
        params: "{'ignoreStatus':'3'}",
      };
      loginService.getAllCurrUserAttendPartyMeetingPage(data).then((res) => {
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        res.data.forEach((v, i) => {
          v.btns = [
            {
              action: "delete",
              text: "修改",
              color: "#f0ad4e",
            },
          ];
        });
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    canEditOrDelete() {
      let roleType = this.$localStorage.get("roleType");
      return tools.hasRoleType(roleType);
    },
    go() {
      this.$router.push({ path: `/organizationRecord` });
    },
  },
};
</script>
<style scoped="" lang="scss">
.swiper-no-swiping {
  transform: translateX(0) !important;
}
</style>
